export default {
  data() {
    return {
      colorList: ["skyblue", "green", "red"],
      titleStyle: {
        // title字的大小及颜色
        color: "#888",
        fontSize: 17,
        fontWeight: "normal",
        fontFamily: "sans-serif"
      },
      legendStyle: {
        color: "#888",
        fontSize: 12
      },
      xyLineStyle: {
        color: "#888",
        width: 1,
        type: "solid"
      },
      barWidth: 20
    };
  },
  methods: {
    initLine() {
      return {
        title: {
          text: "运营商间用户占比趋势分析表",
          textStyle: this.titleStyle,
          left: "center",
          top: 10
        },
        tooltip: {
          trigger: "axis"
        },
        legend: {
          textStyle: this.legendStyle,
          itemWidth: 8,
          itemHeight: 8,
          icon: "rect",
          bottom: 10,
          left: "center",
          data: ["移动", "电信", "联通"]
        },
        color: this.colorList,
        xAxis: {
          type: "category",
          boundaryGap: false,
          axisTick: {
            show: false
          },
          axisLine: {
            show: true,
            lineStyle: this.xyLineStyle
          },
          data: [
            "1月",
            "2月",
            "3月",
            "4月",
            "5月",
            "6月",
            "7月",
            "8月",
            "9月",
            "10月",
            "11月",
            "12月"
          ]
        },
        yAxis: {
          type: "value",
          axisTick: {
            show: false
          },
          axisLine: {
            show: false,
            lineStyle: this.xyLineStyle
          }
        },
        series: [{
            name: "移动",
            type: "line",
            stack: "总量",
            data: [120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90]
          },
          {
            name: "电信",
            type: "line",
            stack: "总量",
            data: [220, 182, 191, 234, 290, 330, 310, 220, 182, 191, 234, 290]
          },
          {
            name: "联通",
            type: "line",
            stack: "总量",
            data: [150, 232, 201, 154, 190, 330, 410, 150, 232, 201, 154, 190]
          }
        ]
      };
    },
    initChart(getVal) {
      
      var getXAxis = [];
      // var getYAxis = [];
      var getSeries = [];
      var bottomNum = 70;

      // 设置xAxis 
      if (getVal.chartType == 4) {
        getVal.xAxis.forEach((item, index) => {
          if (index == 1) {
            getXAxis.unshift({
              position: 'bottom',
              axisLabel: {
                color: '#000',
                margin: 30 * index
              },
              axisTick: {
                length: 40 * index
              },
              data: item,
              axisLine: {
                lineStyle: {
                  color: '#ccc'
                }
              }
            })
          } else if (index == 0) {
            getXAxis.push({
              position: 'bottom',
              type: 'category',
              data: item,
              axisLabel: {
                color: '#000',
              },
              axisLine: {
                lineStyle: {
                  color: '#ccc'
                }
              }
            })
          } else {
            getXAxis.push({
              position: 'bottom',
              axisLabel: {
                color: '#000',
                margin: 30 * index
              },
              axisTick: {
                length: 40 * index
              },
              data: item,
              axisLine: {
                lineStyle: {
                  color: '#ccc'
                }
              }
            })
          }
          bottomNum = 30*(index+1)+40;
        })
      } else if (getVal.chartType == 6) {
        getXAxis.push({
          type: 'category',
          data: getVal.xAxis[0],
          axisPointer: {
            type: 'shadow'
          },
          axisLabel: {
            color: '#000',
          },
          axisLine: {
            lineStyle: {
              color: '#ccc'
            }
          }
        })
      } else if (getVal.chartType == 7) {
        // 有表格类型的图表
        getXAxis.push({
          type: 'category',
          data: getVal.xAxis[0],
          axisTick: {
            length: 130,//竖线的长度
            lineStyle: {
              color: '#000'
            }
            
          },
          axisPointer: {
            type: 'shadow'
          },
          axisLabel: {
            color: '#000',
            interval: 0,
            fontSize: 12,
            formatter: function(value, index) {
              let tableStr = '';

              getVal.series.forEach(function (item, i) {
                
                tableStr  += '}\n{table|' +  ( item.data[index] !== null ? ( parseInt(item.data[index])==item.data[index]?item.data[index]:(item.data[index] ).toFixed(2)) + getVal.unit : '')   ;
                // tableStr  += '\n' +( item.data[indexNum] || 0 ).toFixed(2) ;

              })
              let d = value.indexOf('.') ;
              if(d === -1) {
                d = value.indexOf('年');
              }

              return '{table|' + value.substring(0, d) +'\n' + value.substring(d+1) + tableStr + '}';
              // return  value.substring(0, d) +'\n' + value.substring(d+1) + tableStr ;
              
            },
            rich: {
              table: {
                lineHeight: 25,
                align: 'center'
              }
            }
          },
          axisLine: {
            lineStyle: {
              color: '#ccc'
            }
          },

        })

        bottomNum = 25 * (getVal.series.length +2) + 35 ;

      }else if (getVal.chartType == 8 ||getVal.chartType == 9 || getVal.chartType == 10) {


        getXAxis.push({
          type: 'category',
          data: getVal.xAxis[0],
          axisPointer: {
            type: 'shadow'
          },
          axisLabel: {
            color: '#000',
            interval: 0,
            rotate: getVal.chartType == 10 ? 0: 45,
            formatter: function(value, index) {
              if( getVal.chartType != 10 ) return value;
              let strList = value.split('');
              return strList.join('\n');
            }
          },
          axisLine: {
            lineStyle: {
              color: '#ccc'
            }
          }
        })

        bottomNum = getVal.chartType == 10 ? 80 : 130;

      } else {
        getVal.xAxis.forEach((item, index) => {
          if (index == 0) {
            getXAxis.push({
              type: 'category',
              data: item,
              axisPointer: {
                type: 'shadow'
              },
              axisLabel: {
                color: '#000',
              },
              axisLine: {
                lineStyle: {
                  color: '#ccc'
                }
              }
            })
          } else {
            getXAxis.push({
              position: 'bottom',
              axisLabel: {
                color: '#000',
                margin: 30 * index
              },
              axisTick: {
                length: 40 * index
              },
              data: item,
              axisLine: {
                lineStyle: {
                  color: '#ccc'
                }
              }
            })
            bottomNum = 30 * (index + 1) + 40
          }
        })
      }

      var nowStack = ""
      var needBarGap = "0"
      var needBarWidth = 30;
      let barMaxWidth = 35;
      var needPosition = "top"
      if (getVal.chartType == 5 ) {
        nowStack = "1";
        needPosition = "inside"
      }

      if (getVal.chartType == 4 || getVal.chartType ==9 ||getVal.chartType ==6 ||getVal.chartType ==8 || getVal.chartType === 10) {
        needBarWidth = ''
        if(getVal.series&&getVal.series[0].data){
          needBarGap = (getVal.xAxis.length/getVal.series[0].data.length*100).toFixed(2)+"%"
        }else{
          needBarGap = "100%"
        }

        if (getVal.chartType == 8  ) {
          needPosition = "inside";
        }

      }



      // 设置series
      if (getVal.chartType == 2 ) {
        getVal.series.forEach(function (item, index) {
          getSeries.push({
            name: item.name,
            type: 'line',
            data: item.data,
            label: {
              show: true,
              position: needPosition,
              formatter: function (val) {
                return val.value + getVal.unit
              },
              textStyle: {
                color: 'black',
                fontSize: '10'
              }
            },
            symbolSize: 5,
            lineStyle: {
              color: getVal.color[index],
            },
            itemStyle: {
              // 点颜色
              color: getVal.color[index],

            }
          })
        })




      } else if(getVal.chartType == 7) {
        getVal.series.forEach(function (item, index) {
          // console.log(item, index);
          getSeries.push({
            name: item.name,
            type: 'line',
            data: item.data,
            symbol: 'circle',
            symbolSize: 8,
            lineStyle: {
              color: getVal.color[index],
            },
           
          })
        })
      }else if(getVal.chartType === 8) {
        let barGapData = [];
        getVal.series[0].data.forEach(function (item, index) {
         if(getVal.series[0].icon[index]){
           let symbol = ('' + ( getVal.series[0].icon[index] === 'up'? require("@/../public/img/up.png") :require("@/../public/img/down.png")) );

           barGapData.push({
             value: item,
             symbol: 'image://' + symbol,
           })
         }
        });

        getSeries.push(
          {
            name: getVal.series[0].name || '',
            type: 'bar',
            data: getVal.series[0].data,
            stack: nowStack,
            barWidth: needBarWidth,
            barMaxWidth: barMaxWidth,
            barGap: needBarGap,
            z: 10,
            itemStyle: {
              normal: {
                // 柱状颜色
                color: getVal.color[0],
                label: {
                  show: true,
                  position: needPosition,
                  
                  formatter: function (val) {
                    return (val.value).toFixed(1) 
                  },
                  textStyle: {
                    color: 'black',
                    fontSize: '9'
                  }
                }
              }
            }
          },
          {
            type: 'pictorialBar',
            barGap: needBarGap,
            barWidth: needBarWidth,
            symbolPosition: 'end',
            symbolSize: [13, 26],
            symbolOffset: [0, '-100%'],
            data: barGapData,
           
          },
        )
        

      }else if(getVal.chartType === 5) {
        getVal.series.forEach(function (item, index) {
          getSeries.push({
            name: item.name,
            type: 'bar',
            data: item.data,
            stack: nowStack,
            barWidth: needBarWidth,
            barMaxWidth: barMaxWidth,
            barGap: needBarGap,
            itemStyle: {
              normal: {
                // 柱状颜色
                color: getVal.color[index],
                label: {
                  show: true,
                  position: needPosition,
                  formatter: function (val) {
                    return val.value + getVal.unit
                  },
                  textStyle: {
                    color: 'black',
                    fontSize: '10'
                  }
                }
              }
            },
            zlevel: index == 1? 0 : 1
          })
        })
      }else {
        getVal.series.forEach(function (item, index) {
          getSeries.push({
            name: item.name,
            type: 'bar',
            data: item.data,
            stack: nowStack,
            barWidth: needBarWidth,
            barMaxWidth: barMaxWidth,
            barGap: needBarGap,
            markLine:item.chartMarkLineData&&item.chartMarkLineData.length>0?{
              data:item.chartMarkLineData,
              symbol:'',
              label:{
                show: true,
                position:"end",
                distance: 0,
                formatter: function (val) {
                  return (Number(val.value)).toFixed(1)
                },
                textStyle: {
                  fontSize: '10'
                }
              },
              lineStyle:{
                color:"#ff454a",
                width:1.5,
                type:'solid'

              }
            }:{},
            itemStyle: {
              normal: {
                // 柱状颜色
                color: getVal.color[index],
                label: {
                  show: true,
                  position: needPosition,
                  formatter: function (val) {
                    return   ( getVal.chartType === 9 || getVal.chartType == 10)   ? ((val.value > 1 ? (val.value).toFixed(1) : val.value)):(val.value + getVal.unit)
                  },
                  textStyle: {
                    color: 'black',
                    fontSize: getVal.chartType === 10 ? '8' : '10'
                  }
                }
              }
            },
          })
        })

      }

      let obj = {
        title: {
          text: getVal.name + ( (getVal.chartType === 8 ||getVal.chartType === 9 || getVal.chartType === 10)&&getVal.unit ? (' ('+getVal.unit+')'):'' ),
          x: 'center',
          top: 15,
          textStyle: {
            fontFamily: "SimSun"
          }
        },
        tooltip: {
          // 数值后需要加 ‘%’ 时使用，其余时候不需要
          trigger: 'item',
          formatter: function (params) {
            var result = (params.seriesName?params.seriesName+ "<br>":"");
            result += params.marker + " " + params.name + " : " + params.value + getVal.unit;
            return result;
          }
        },
        grid: {
          bottom: bottomNum,
          top: 80,
        },
        legend: {
          bottom: 10
        },
        xAxis: getXAxis,
        yAxis: [{
          type: 'value',
          axisLabel: {
            color: '#000',
            formatter: '{value}' + ' ' + (getVal.chartType == 10 ? '' : getVal.unit)
          },
          axisLine: {
            lineStyle: {
              color: '#ccc'
            }
          }
        }],
        series: getSeries,
      }
      
      // 需要表格的 折线图
      if(getVal.chartType == 7) {
        // 绘制表格
        function getTableLine(num) {
          let list = [];
          let bottom = bottomNum - 35 - 20; //控制线的位置
          let height = 25;
          for (let i = 0; i < num; i++) {
            list.push(
              {
                type: 'line',
                bottom: bottom - i * height,
                right: 0,
                style: {
                  fill: '#333'
                },
                shape: {
                  x1: 0,
                  y1: 0,
                  x2: 1000,
                  y2: 0,
                }
        
              },
            );
            if(i > 0 ) {
              // 加文字
              list.push({
                type: 'text',
                bottom: bottom - i * height + 5,
                left: 15,
                style: {
                  text: getVal.series[i -1].name,
                  fill: '#333'
                },
                
              })
              // 加彩色线
              list.push({
                type: 'line',
                bottom: bottom - i * height + 10,
                left: 0,
                style: {
                  lineWidth: 2,
                  stroke: getVal.color[i -1]
                },
                shape: {
                  x1: 0,
                  y1: 0,
                  x2: 10,
                  y2: 0,
                }
                
              })
            }
          }
          // 加一条前竖线
          list.push({
            type: 'line',
            bottom: bottom - 3 * height,
            left: 0,
            style: {
              fill: '#333'
            },
            shape: {
              x1: 0,
              y1: 0,
              x2: 0,
              y2: 75,
            }
            
          })
          // 加一条后竖线
          list.push({
            type: 'line',
            bottom: bottom - 3 * height,
            right: 0,
            style: {
              fill: '#333'
            },
            shape: {
              x1: 0,
              y1: 0,
              x2: 0,
              y2: 128,
            }
            
          })
          return list;
        }
       let lineList = getTableLine(getVal.series.length + 1);
        obj.graphic = lineList;

        // 设置grid
        obj.grid = {
          bottom: bottomNum,
          top: 80,
          // left: 20,
          right: 0,
        }

        // 设置color
        obj.color = getVal.color;

        
      }

       // 设置yAxis 最大值最小值
      let setMaxAndMin = true;
      getVal.series.forEach((item, index) => {
        if(item.chartMarkLineData&&item.chartMarkLineData.length>0){
          item.chartMarkLineData.forEach(x=>{
            if(x.yAxis){
              obj.yAxis[0].max = x.yAxis;
            }
          })
        }
        if(item.data) {
          item.data.forEach((item, index) => {
            if(item) {
              if(obj.yAxis[0].max&&item>obj.yAxis[0].max){
                obj.yAxis[0].max=item;
              }
              setMaxAndMin = false
            }
          })
        }
        if(item.minInterval && item.minInterval>0) {
          obj.yAxis[0].minInterval = item.minInterval;
        }
        
      })
      if(setMaxAndMin) {
        obj.yAxis[0].min = 0;
        obj.yAxis[0].max = 100;
      }
      

      // 需要添加最小值 ，否则箭头显示超高
      if(getVal.chartType === 8) {
        obj.yAxis[0].min = 0;
        // obj.yAxis[0].max = 100;
      }

      // 右边距调0
      if(getVal.chartType === 10) {
        obj.grid.right = 25;
        obj.grid.left = 45;
      }
      return obj;
    },
  }
};
